<template>
    <div class="previous-content mt-[15px] shadow-xl">
        <t-card :bordered="false">
            <t-list :split="false">
                <template #header>
                    <div class="previous-title font-medium text-lg">
                        前五篇
                    </div>
                </template>
                <t-list-item v-for="(item, index) in previousContent.data" :key="index">
                    <span v-if="index === 0">
                        <span v-if="item.type === 'topic'">
                            <router-link
                                class="text-[16px] text-[#5e5e5e]  hover:text-[#0052d9] transition duration-700 ease-in-out"
                                :to="`/topic/${item.cs_id}`"><t-tag shape="round" theme="danger">{{ index + 1
                                    }}</t-tag> {{
            item.title }}</router-link>
                        </span>
                        <span v-else>

                        </span>
                    </span>
                    <span v-else-if="index === 1">
                        <span v-if="item.type === 'topic'">
                            <router-link
                                class="text-[16px] text-[#5e5e5e]  hover:text-[#0052d9] transition duration-700 ease-in-out"
                                :to="`/topic/${item.cs_id}`"><t-tag shape="round" theme="warning">{{ index +
            1 }}</t-tag> {{
            item.title }}</router-link>
                        </span>
                        <span v-else>

                        </span>
                    </span>
                    <span v-else-if="index === 2">
                        <span v-if="item.type === 'topic'">
                            <router-link
                                class="text-[16px] text-[#5e5e5e]  hover:text-[#0052d9] transition duration-700 ease-in-out"
                                :to="`/topic/${item.cs_id}`"><t-tag shape="round" theme="success">{{ index +
            1 }}</t-tag> {{
            item.title }}</router-link>
                        </span>
                        <span v-else>

                        </span>
                    </span>
                    <span v-else>
                        <span v-if="item.type === 'topic'">
                            <router-link
                                class="text-[16px] text-[#5e5e5e]  hover:text-[#0052d9] transition duration-700 ease-in-out"
                                :to="`/topic/${item.cs_id}`"><t-tag shape="round">{{
                                    index + 1 }}</t-tag> {{ item.title
                                }}</router-link>
                        </span>
                        <span v-else>

                        </span>
                    </span>
                </t-list-item>
            </t-list>
        </t-card>
    </div>
</template>

<script setup lang="ts">

// 定义props
const props = defineProps({
    number: {
        type: Number,
        default: 10
    }
});

// 使用路由
const route = useRoute();
// 优化获取key
let key = route.params.key;
if (key === undefined) {
    if (process.client) {
        const url = window.location.href;
        const urlInfo = [...url.split('/')]
        key = urlInfo[urlInfo.length - 1]

    }
}

// 获取前N条内容
const { data: previousContent } = await useFetch(`${baseUrl}/content/previous/${key}/${props.number}`);
</script>

<style scoped>
:deep() {
    .t-card__body {
        padding: 10px !important;
    }

    .t-list-item {
        padding: 5px !important;
    }

    .t-list__header {
        padding-left: 5px !important;
    }
}
</style>